<template>
  <div class="address">
    <van-nav-bar
      title="地址列表"
      left-text="返回"
      left-arrow
      fixed
      @click-left="back"
    />

  <div class="address-box">
    <div class="address-item">
      <div class="item-box">
        <van-address-list
      :list="list"
      default-tag-text="默认"
      :switchable="false"
      @add="add"
      @edit="edit"
    />
      </div>
      
    </div>
  </div>
    
  </div>
</template>

<script>
export default {
  name: "Address",

  data() {
    return {
      //地址列表
      list: [],
    };
  },

  created() {
    this.getUserAddressData();
  },

  methods: {
    //返回上一级
    back() {
      this.$router.go(-1);
    },

    //新增地址
    add() {
      this.$router.push({ name: "NewAddress" });
    },

    //编辑地址
    edit(item) {
      this.$router.push({ name: "NewAddress" , params: {aid: item.aid}});
    },

    //获取用户地址数据
    getUserAddressData() {
      //获取token
      let tokenString = sessionStorage.getItem("token");

      this.axios({
        method: "GET",
        url: "/findAddress",
        params: {
          tokenString
        }
      })
        .then((res) => {
          
          // console.log('getUserAddressData res ==> ', res);

          if (res.data.code == 700) {
            //用户未登录, 拦截操作, 通知用户去登录
            this.$toast('请先登录');
            setTimeout(() => {
              this.$router.push({name: 'Login'});
            }, 2000)

            return;
          }

          if (res.data.code === 20000) {
            res.data.result.forEach(v => {
              v.isDefault = Boolean(v.isDefault);
              v.address = `${v.province}${v.city}${v.county}${v.addressDetail}`;
            })

            this.list = res.data.result;
          }

        
        })
        .catch((err) => {
          console.log("err ==> ", err);
        });
    }
  },
};
</script>

<style lang="less" scoped>
.address {
  padding-top: 46px;
  /deep/ .van-nav-bar .van-icon {
    color: #0c34ba;
  }

  /deep/ .van-nav-bar__text {
    color: #0c34ba;
  }

  /deep/ .van-address-item .van-radio__icon--checked .van-icon {
    border-color: #0c34ba;
    background-color: #0c34ba;
  }

  /deep/ .van-tag--danger {
    background-color: #0c34ba;
  }

  /deep/ .van-button--danger {
    border-color: #0c34ba;
    background-color: #0c34ba;
  }

  /deep/ .van-address-list {
    padding: 10px 10px 60px;
  }
  .address-box{
    height: 160px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: #0c34ba;
  }
  .address-item{
    margin: 10px;
    padding: 10px;
    position: relative;
    top: 125px;
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  /deep/.van-address-item{
    border-bottom: 0.5px solid #666;
  }

}
</style>